<template>
  <div class="overView" ref="overView">
    <div class="all-data">
      <div class="content">
        <div
          class="box temp"
          @click="selectTypeFun('temp')"
          :class="selectType.temp ? 'select-temp' : ''"
        >
          <div class="flex">
            <div class="name">温度</div>
            <div class="img">
              <img
                src="@/assets/platformDetail/temp_new.png"
                class="overview-img"
              />
            </div>
          </div>
        </div>
        <div
          class="box hum"
          @click="selectTypeFun('hum')"
          :class="selectType.hum ? 'select-hum' : ''"
        >
          <div class="flex">
            <div class="name">湿度</div>
            <div class="img">
              <img
                src="@/assets/platformDetail/hum_new.png"
                class="overview-img"
              />
            </div>
          </div>
        </div>
        <div
          class="box pm25"
          @click="selectTypeFun('pm25')"
          :class="selectType.pm25 ? 'select-pm25' : ''"
        >
          <div class="flex">
            <div class="name">PM2.5</div>
            <div class="img">
              <img
                src="@/assets/platformDetail/pm25_new.png"
                class="overview-img"
              />
            </div>
          </div>
        </div>
        <div
          class="box co2"
          @click="selectTypeFun('co2')"
          :class="selectType.co2 ? 'select-co2' : ''"
        >
          <div class="flex">
            <div class="name">CO<sub>2</sub></div>
            <div class="img">
              <img
                src="@/assets/platformDetail/co2_new.png"
                class="overview-img"
              />
            </div>
          </div>
        </div>
        <div
          class="box illuminance"
          @click="selectTypeFun('illuminance')"
          :class="selectType.illuminance ? 'select-illuminance' : ''"
        >
          <div class="flex">
            <div class="name">照度</div>
            <div class="img">
              <img
                src="@/assets/platformDetail/illuminance_new.png"
                class="overview-img"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <el-form :model="searchForm" size="small" ref="form">
          <div style="height: 310px">
            <el-form-item label="查询模式">
              <el-radio-group
                v-model="dateRadioType"
                @input="changeRadioTimeFun"
              >
                <el-radio-button :label="1">时刻查询</el-radio-button>
                <el-radio-button :label="2">时段查询</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="重建算法:">
              <el-select v-model="searchForm.type">
                <el-option
                  v-for="item in cjsfList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="查询时间">
              <el-date-picker
                v-show="dateRadioType == 1"
                @change="changeTimeFun"
                v-model="timeValue"
                type="datetime"
                format="yyyy-MM-dd HH:mm"
                placeholder="选择日期时间"
                :popper-options="{
                  modifiers: [
                    {
                      name: 'flip',
                      options: {
                        fallbackPlacements: ['bottom'],
                        allowedAutoPlacements: ['bottom'],
                      },
                    },
                  ],
                }"
              >
              </el-date-picker>
              <el-date-picker
                v-if="dateRadioType == 2"
                @change="changeTimeRangeFun"
                v-model="timeRangeValue"
                type="datetimerange"
                range-separator="至"
                format="yyyy-MM-dd HH:mm"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :popper-options="{
                  modifiers: [
                    {
                      name: 'flip',
                      options: {
                        fallbackPlacements: ['bottom'],
                        allowedAutoPlacements: ['bottom'],
                      },
                    },
                  ],
                }"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item
              label="开启自动轮播"
              v-show="dateRadioType == 2 && timeRangeValue != null"
            >
              <el-switch
                v-model="loopFlag"
                class="main-el-switch"
                :inline-prompt="true"
                active-text="ON"
                inactive-text="OFF"
                @change="changeLoopFun"
              ></el-switch>
            </el-form-item>

            <div
              class="root"
              :style="{ width: timeLineListW + 'px' }"
              ref="root"
              v-show="dateRadioType == 2 && timeRangeValue != null"
            >
              <div class="container" ref="containerRef">
                <div
                  v-for="(item, index) in timeLineList"
                  :key="item.ts"
                  :ref="item.ts"
                  class="list"
                >
                  <div
                    class="dot"
                    @click="getRangeTimeFun(item.ts)"
                    :class="
                      slectRangeTime == item.ts
                        ? 'slectDot'
                        : item.hasField
                        ? 'hasFieldDot'
                        : ''
                    "
                  >
                    <div class="name">
                      {{ item.ts | dateFormate }}
                    </div>
                  </div>
                  <div
                    class="line"
                    v-show="index != timeLineList.length - 1"
                  ></div>
                </div>
              </div>
            </div>
            <el-form-item>
              <el-button type="primary" @click="searchFormFun">查询</el-button>
              <el-button type="primary" @click="downloadFun">下载</el-button>
            </el-form-item>
          </div>
        </el-form>
        <div></div>
        <div v-loading="loading" style="width: 100%">
          <div
            v-show="!errEchart"
            class="box"
            style="width: 100%; height: 450px"
            :id="chartId"
          ></div>
          <el-empty
            v-show="errEchart"
            style="height: 450px"
            description="没有发现场图相关数据"
          ></el-empty>
        </div>
      </div>
    </div>
    <downloadDialog :showDialog="showDialog" @changeVisible="changeVisible" />
  </div>
</template>
<script>
import * as echarts from "echarts";
import { moment as momentApi, period, properties } from "@/api/sceneManage";
import downloadDialog from "../downloadDialog";
import { getImg } from "@/api/common";
import moment from "moment";
export default {
  components: { downloadDialog },
  props: {
    type: {
      type: Number,
      default: 1,
    },
    chartId: {
      type: String,
      default: "chart",
    },
    fieldPatternId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      myChart: null,
      resolution: 1,
      chartData: [],
      searchForm: {},
      selectType: {},
      showDialog: false,
      logoUrl: "",
      dateRadioType: 1,
      timeLineList: [],
      timeLineListW: null,
      slectRangeTime: null,
      echartTime: null, //echart获取数据时时间
      errEchart: false,
      timeRangeValue: null,
      timeValue: null,
      loading: false,
      timer: null,
      loopFlag: false,
      hasFieldTimeList: [],
      cjsfList: [
        { name: "空间插值", id: "RBF" },
        { name: "时空插值", id: "RCF" },
        { name: "2D-kernel方法", id: "RDF" },
      ],
    };
  },
  created() {
    this.dateRadioType = 1;
  },
  mounted() {
    this.errEchart = true;
    this.selectTypeFun("temp", false);
    this.searchForm.type = "RBF";
    this.timeValue = new Date();
    this.changeTimeFun(new Date());
    try {
      this.timeLineListW = this.$refs.overView.clientWidth - 40;
    } catch (error) {}
    this.$nextTick(() => {
      this.getDataFun();
    });
    window.addEventListener("resize", () => {
      this.myChart?.resize();
      try {
        this.timeLineListW = this.$refs.overView.clientWidth - 40;
      } catch (error) {}
    });
  },
  filters: {
    dateFormate(val) {
      return moment(val).format("YYYY-MM-DD HH:mm");
    },
  },
  methods: {
    getDataFun() {
      let _this = this;
      let { ts, dataType, type } = { ...this.searchForm };
      let data = {
        fieldPatternId: this.fieldPatternId,
        ts,
        dataType,
        svg: true,
        type,
      };
      this.loading = true;
      properties({ fieldPatternId: _this.fieldPatternId }).then((res) => {
        this.resolution = res.value.resolution;
        momentApi(data)
          .then((res) => {
            this.loading = false;
            this.errEchart = false;
            let resData = res.data;
            let imgKey = res.fieldMapKey;
            let svg = res.svg;
            _this.echartTime = ts;
            let chartData = [];
            for (let i = 0; i < resData.length; i++) {
              const element = resData[i];
              let arr = [];
              arr.push(element.x);
              arr.push(element.y);
              arr.push(element.val);
              this.chartData.push(arr);
            }
            this.$nextTick(() => {
              this.setChart(
                this.chartData,
                this.searchForm,
                svg,
                this.resolution
              );
            });
          })
          .catch((err) => {
            this.loading = false;
            this.errEchart = true;
          });
      });
    },
    getRangeTimeFun(time) {
      if (this.timer) {
        clearInterval(this.timer);
        this.loopFlag = false;
      }
      this.getRangeTimeFun1(time);
    },
    changeLoopFun(e) {
      if (this.timer) {
        clearInterval(this.timer);
      }
      if (e) {
        let i = 0;
        this.timer = setInterval(() => {
          if (i < this.hasFieldTimeList.length - 1) {
            i = i + 1;
          } else {
            i = 0;
          }
          this.getRangeTimeFun1(this.hasFieldTimeList[i].ts);
        }, 1000 * 10);
      }
    },
    getRangeTimeFun1(time) {
      let index = this.timeLineList.findIndex((item) => item.ts == time);
      this.$nextTick(() => {
        this.$refs.root.scrollLeft = 112 * index;
      });

      this.slectRangeTime = time;
      this.searchForm.ts = moment(time).valueOf();
      this.getDataFun();
    },
    changeVisible(e) {
      this.showDialog = e;
    },
    selectTypeFun(type, getData = true) {
      this.selectType = {};
      let that = this;
      switch (type) {
        case "temp":
          that.selectType.temp = true;
          that.searchForm.dataType = "ROBOT_TEMPERATURE";
          break;
        case "hum":
          that.selectType.hum = true;
          that.searchForm.dataType = "ROBOT_HUMIDITY";
          break;
        case "co2":
          that.selectType.co2 = true;
          that.searchForm.dataType = "ROBOT_CO2";
          break;
        case "pm25":
          that.selectType.pm25 = true;
          that.searchForm.dataType = "ROBOT_PM25";
          break;
        case "illuminance":
          that.selectType.illuminance = true;
          that.searchForm.dataType = "ROBOT_LUX";
          break;
        default:
          break;
      }
      if (getData) {
        this.getDataFun();
      }
    },
    searchFormFun() {
      if (this.timer) {
        clearInterval(this.timer);
        this.loopFlag = false;
      }
      this.getDataFun();
    },
    downloadFun() {
      this.showDialog = true;
    },
    changeTimeRangeFun(e) {
      this.searchForm.showTimeRange = `${e[0]}-${e[1]}`;
      let data = {
        fieldPatternId: this.fieldPatternId,
        dataType: this.searchForm.dataType,
        from: new Date(e[0]).getTime(),
        to: new Date(e[1]).getTime(),
      };
      this.hasFieldTimeList = [];
      period(data).then((res) => {
        this.timeLineList = res.value;

        // let findFirstTime = this.timeLineList.find(item => item.hasField == true);
        this.hasFieldTimeList = this.timeLineList.filter(
          (item) => item.hasField == true
        );
        if (this.hasFieldTimeList.length > 0) {
          this.getRangeTimeFun1(this.hasFieldTimeList[0].ts);
        }
      });
      // this.getRangeTimeList(new Date(e[0]).getTime(), new Date(e[1]).getTime());
    },
    // getRangeTimeList(start, end) {
    //   this.timeLineList = [];

    //   if (end - start <= 6 * 60 * 60 * 1000) {
    //     for (let index = start; index <= end; index += 900000) {
    //       this.timeLineList.push(moment(index).format("YYYY-MM-DD HH:mm"));
    //     }
    //   } else {
    //     for (let index = start; index <= end; index += 1800000) {
    //       this.timeLineList.push(moment(index).format("YYYY-MM-DD HH:mm"));
    //     }
    //   }
    //   if (
    //     moment(this.timeLineList[this.timeLineList.length - 1]).unix()*1000 < end
    //   ) {
    //     this.timeLineList.push(moment(end).format("YYYY-MM-DD HH:mm"));
    //   }
    // },
    loopFun() {
      let i = 0;
      this.timer = setInterval(() => {
        if (i < this.hasFieldTimeList.length - 1) {
          i = i + 1;
        } else {
          i = 0;
        }
        this.getRangeTimeFun1(this.hasFieldTimeList[i].ts);
      }, 1000 * 10);
    },
    changeTimeFun(e) {
      this.searchForm.ts = e.getTime();
    },
    changeRadioTimeFun(e) {
      if (e == 1) {
        this.searchForm.showTimeRange = this.timeValue;
        if (this.timer) {
          clearInterval(this.timer);
          this.loopFlag = false;
        }
      } else {
        if (this.timeRangeValue) {
          this.searchForm.showTimeRange = `${this.timeRangeValue[0]}-${this.timeRangeValue[1]}`;
        }
      }
    },
    setChart(chartData, searchForm, svg, resolution) {
      const _this = this;
      if (
        _this.myChart != null &&
        _this.myChart != "" &&
        _this.myChart != undefined
      ) {
        _this.myChart.dispose(); //销毁
      }
      _this.myChart = echarts.init(document.getElementById(this.chartId), {
        renderer: "svg",
      });
      let minValue = 0;
      let maxValue = 10;
      let month = moment(_this.echartTime).month() + 1;
      let text = [];
      let units = "℃";
      let color = ["#7f00ff", "#00b4eb", "#80feb3", "#ffb260", "#ff0000"];
      let continuous_right = 35;
      let categories = ["28℃", "27℃", "26℃", "25℃", "24℃"];
      let piecewise_color = [
        "#000000",
        "#000000",
        "#000000",
        "#000000",
        "#000000",
      ];
      let itemGap = 46;
      switch (_this.searchForm.dataType) {
        case "ROBOT_TEMPERATURE":
          minValue = month <= 9 && month >= 5 ? 24 : 18;
          maxValue = month >= 11 || month <= 3 ? 24 : 28;
          text = [`${maxValue}℃`, `${minValue}℃`];
          units = "℃";
          continuous_right = 35;
          if (month <= 9 && month >= 5) {
            //夏季
            color = ["#7f00ff", "#00b4eb", "#80feb3", "#ffb260", "#ff0000"];
            categories = ["28℃", "27℃", "26℃", "25℃", "24℃"];
            piecewise_color = [
              "#000000",
              "#000000",
              "#000000",
              "#000000",
              "#000000",
            ];
            itemGap = 75;
          } else if (month >= 11 || month <= 3) {
            //冬季
            color = [
              "#7f00ff",
              "#2b7ef6",
              "#2adcdc",
              "#80feb3",
              "#d4dc7f",
              "#ff7e41",
              "#ff0000",
            ];
            categories = ["24℃", "23℃", "22℃", "21℃", "20℃", "19℃", "18℃"];
            piecewise_color = [
              "#000000",
              "#000000",
              "#000000",
              "#000000",
              "#000000",
              "#000000",
              "#000000",
            ];
            itemGap = 46;
          } else {
            //过渡季
            color = [
              "#7f00ff",
              "#1995f2",
              "#4cf2ce",
              "#b2f295",
              "#ff954e",
              "#ff0000",
            ];
            categories = ["28℃", "26℃", "24℃", "22℃", "20℃", "18℃"];
            piecewise_color = [
              "#000000",
              "#000000",
              "#000000",
              "#000000",
              "#000000",
              "#000000",
            ];
            itemGap = 57.5;
          }
          break;
        case "ROBOT_HUMIDITY":
          minValue = month <= 9 && month >= 5 ? 40 : 30;
          maxValue = month <= 9 && month >= 5 ? 70 : 60;
          text = [`${maxValue}%`, `${minValue}%`];
          units = "%";
          continuous_right = 35;
          if (month <= 9 && month >= 5) {
            //夏季
            color = ["#7f00ff", "#2adcdc", "#d4dc7f", "#ff0000"];
            categories = ["70%", "60%", "50%", "40%"];
            piecewise_color = ["#000000", "#000000", "#000000", "#000000"];
            itemGap = 104;
          } else {
            //过渡季&冬季
            color = ["#7f00ff", "#2adcdc", "#d4dc7f", "#ff0000"];
            categories = ["60%", "50%", "40%", "30%"];
            piecewise_color = ["#000000", "#000000", "#000000", "#000000"];
            itemGap = 104;
          }
          break;
        case "ROBOT_PM25":
          minValue = 35;
          maxValue = 75;
          text = [`${maxValue}µg/m³`, `${minValue}µg/m³`];
          units = "µg/m³";
          continuous_right = 59;
          color = ["#7f00ff", "#00b4eb", "#80feb3", "#ffb260", "#ff0000"];
          categories = ["75µg/m³", "65µg/m³", "55µg/m³", "45µg/m³", "35µg/m³"];
          piecewise_color = [
            "#000000",
            "#000000",
            "#000000",
            "#000000",
            "#000000",
          ];
          itemGap = 75;
          break;
        case "ROBOT_CO2":
          minValue = 400;
          maxValue = 1000;
          text = [`${maxValue}ppm`, `${minValue}ppm`];
          units = "ppm";
          continuous_right = 63;
          color = [
            "#7f00ff",
            "#2b7ef6",
            "#2adcdc",
            "#80feb3",
            "#d4dc7f",
            "#ff7e41",
            "#ff0000",
          ];
          categories = [
            "1000ppm",
            "900ppm",
            "800ppm",
            "700ppm",
            "600ppm",
            "500ppm",
            "400ppm",
          ];
          piecewise_color = [
            "#000000",
            "#000000",
            "#000000",
            "#000000",
            "#000000",
            "#000000",
            "#000000",
          ];
          itemGap = 46;
          break;
        case "ROBOT_LUX":
          minValue = 300;
          maxValue = 1500;
          text = [`${maxValue}lx`, `${minValue}lx`];
          units = "lx";
          continuous_right = 47;
          color = [
            "#7f00ff",
            "#2b7ef6",
            "#2adcdc",
            "#80feb3",
            "#d4dc7f",
            "#ff7e41",
            "#ff0000",
          ];
          categories = [
            "1500lx",
            "1300lx",
            "1100lx",
            "900lx",
            "700lx",
            "500lx",
            "300lx",
          ];
          piecewise_color = [
            "#000000",
            "#000000",
            "#000000",
            "#000000",
            "#000000",
            "#000000",
            "#000000",
          ];
          itemGap = 46;
          break;
        default:
          return "";
      }
      echarts.registerMap("bgImg", {
        svg: svg,
      }); //这里的factoryDrawing必须要和geo里面的map值统一
      let option = {
        tooltip: {
          show: true,
          triggerOn: "mousemove", // 只做鼠标悬浮效果
          formatter: function (params) {
            switch (_this.searchForm.dataType) {
              case "ROBOT_TEMPERATURE":
                return `时间：${moment(_this.echartTime).format(
                  "YYYY-MM-DD HH:mm"
                )}<br/>
            X：${(params.value[0] * resolution).toFixed(1)}m<br/>
            Y：${(params.value[1] * resolution).toFixed(1)}m<br/>
            温度：${params.value[2].toFixed(1)}℃`;
              case "ROBOT_HUMIDITY":
                return `时间：${moment(_this.echartTime).format(
                  "YYYY-MM-DD HH:mm"
                )}<br/>
          X：${(params.value[0] * resolution).toFixed(1)}m<br/>
            Y：${(params.value[1] * resolution).toFixed(1)}m<br/>
            湿度：${Math.round(params.value[2])}%`;
              case "ROBOT_PM25":
                return `时间：${moment(_this.echartTime).format(
                  "YYYY-MM-DD HH:mm"
                )}<br/>
            X：${(params.value[0] * resolution).toFixed(1)}m<br/>
            Y：${(params.value[1] * resolution).toFixed(1)}m<br/>
            PM2.5: ${Math.round(params.value[2])}ug/m³`;
              case "ROBOT_CO2":
                return `时间：${moment(_this.echartTime).format(
                  "YYYY-MM-DD HH:mm"
                )}<br/>
          X：${(params.value[0] * resolution).toFixed(1)}m<br/>
            Y：${(params.value[1] * resolution).toFixed(1)}m<br/>
            CO2：${Math.round(params.value[2])}ppm`;
              case "ROBOT_LUX":
                return `时间：${moment(_this.echartTime).format(
                  "YYYY-MM-DD HH:mm"
                )}<br/>
          X：${(params.value[0] * resolution).toFixed(1)}m<br/>
            Y：${(params.value[1] * resolution).toFixed(1)}m<br/>
            照度：${Math.round(params.value[2])}lx`;

              default:
                return "";
            }
          },
        },
        geo: {
          name: "bgImg",
          map: "bgImg",
          show: true,
          selectedMode: false,
          left: 0,
          right: 80,
        },
        series: [
          {
            type: "heatmap",
            coordinateSystem: "geo",
            data: null,
            markPoint: "none",
            // color:"inherit",
          },
          {
            // emphasis: {
            //   scale: 3,
            // },
            symbol: "rect",
            coordinateSystem: "geo",
            symbolSize: 5,
            data: chartData,
            cursor: "crosshair",
            itemStyle: {
              color: function (params) {
                // if (params.value[2] > 29.5 && params.value[2] < 30) {
                //   return "rgba(255,255,255,1)";
                // } else {
                return "rgba(255,255,255,0)";
                // }
              },
            },
            type: "scatter",
          },
          {
            symbol: "circle",
            xAxisIndex: 1,
            yAxisIndex: 1,
            coordinateSystem: "geo",
            symbolSize: 10,
            geoIndex: 0,
            data: [[0, 0, 0]],
            cursor: "pointer",
            color: "#007aff",
            type: "scatter",
          },
        ],

        visualMap: [
          {
            type: "piecewise",
            min: minValue,
            max: maxValue,
            right: "0",
            bottom: "middle",
            seriesIndex: 0,
            xAxisIndex: 0,
            yAxisIndex: 0,
            calculable: true,
            realtime: false,
            itemWidth: 4,
            itemHeight: 1,
            categories: categories,
            align: "left",
            itemGap: itemGap, //每两个图元之间的间隔距离，单位为px。
            textGap: 5, //每项的色块与文本标签之间的距离，单位为px。
            color: piecewise_color,
          },
          {
            type: "continuous",
            min: minValue,
            max: maxValue,
            orient: "vertical",
            right: continuous_right,
            bottom: "middle",
            inverse: false,
            //text,
            animation: false,
            itemHeight: "350",
            seriesIndex: 0,
            //自定义热力图颜色
            controller: {
              inRange: {
                color: color,
              },
            },
            outOfRange: {
              color: ["rgba(255,255,255,0)"],
            },
            formatter: function (value) {
              return value.toFixed(0) + units; // 范围标签显示内容。
            },
          },
        ],
      };

      this.myChart.setOption(option);
      this.$nextTick(() => {
        this.myChart?.resize();
      });
    },
  },
};
</script>
<style scope></style>
<style lang="scss" scoped>
::v-deep .clearPadding .vxe-cell {
  padding: 0;
}
::v-deep .clearPaddingLeft .vxe-cell {
  padding-left: 0px;
}
::v-deep {
  .main-el-switch {
    padding: 0px;
    position: relative;
    .el-switch__core {
      width: 60px !important;
      height: 24px;
      border-radius: 2px;
      &:after {
        left: 1px;
        top: 1px;
        height: 20px;
        width: 20px;
      }
    }
    .el-switch__core:after {
      border-radius: 2px;
      margin: 0px;
    }
    &.el-switch {
      &.is-checked {
        .el-switch__core {
          &:after {
            left: 100%;
            margin-left: -21px;
            height: 20px;
            width: 20px;
          }
        }
      }
    }
    &.is-checked {
      .el-switch__label--left {
        opacity: 0;
      }
      .el-switch__label--right {
        opacity: 1;
      }
    }
    .el-switch__label {
      position: absolute;
      top: 0;
    }
    .el-switch__label--left {
      right: 0;
      color: #999;
      z-index: 1;
      // margin-right: 8px;
    }
    .el-switch__label--right {
      left: 0;
      color: #fff;
      opacity: 0;
      // margin-left: 8px;
    }
  }
}
.overView {
  width: 100%;
  overflow: hidden;
  padding: 10px 20px;
}
.all-data {
  .title {
    font-family: "Microsoft YaHei";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 21px;
  }
  .content {
    display: flex;
    justify-content: start;
    padding: 10 0;
  }
  .box {
    width: 23%;
    padding: 10px;
    min-width: 100px;
    margin: 1%;
    border-radius: 5px;
    border: 1px solid #ffb40500;
    .flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .name {
      font-weight: 400;
      font-size: 16px;
      height: 100%;
      color: #000000;
    }
    .indoor {
      font-weight: 400;
      font-size: 14px;

      color: #636e78;
    }
  }
  .temp {
    background-color: #fffbee;
  }
  .hum {
    background-color: #eff8ff;
  }
  .co2 {
    background-color: #f3fff6;
  }
  .pm25 {
    background-color: #f3f1ff;
  }
  .illuminance {
    background-color: #fff4f2;
  }
}
.overview-img {
  width: 46px;
}
.label-flex {
  display: flex;
  align-items: center;
  img {
    margin-right: 5px;
  }
}
.select-temp {
  border: 1px solid #ffb405 !important;
  box-shadow: 0px 0px 6px #ffb405;
  .name {
    color: #ffb405 !important;
  }
}
.select-hum {
  border: 1px solid #5b92bd !important;
  box-shadow: 0px 0px 6px #5b92bd;
  .name {
    color: #5b92bd !important;
  }
}
.select-co2 {
  border: 1px solid #79b086 !important;
  box-shadow: 0px 0px 6px #79b086;
  .name {
    color: 79B086 !important;
  }
}
.select-pm25 {
  border: 1px solid #a57ce8 !important;
  box-shadow: 0px 0px 6px #a57ce8;
  .name {
    color: #a57ce8 !important;
  }
}
.select-illuminance {
  border: 1px solid #f8453a !important;
  box-shadow: 0px 0px 6px #f8453a;
  .name {
    color: #f8453a !important;
  }
}
.root {
  overflow: auto;
  margin-bottom: 10px;
  .container {
    display: flex;
    flex-direction: row;
    padding: 0 40px 40px 40px;
    .list {
      height: 12px;
      display: flex;
      align-items: center;
      vertical-align: middle;
      .dot {
        background-color: #8a8a8a;
        color: #8a8a8a;
        width: 12px;
        height: 12px;
        border-radius: 12px;
        margin: auto;
        cursor: pointer;
      }
      .slectDot {
        background-color: #00a500;
        color: #00a500;
        width: 12px;
        font-weight: bold;
        height: 12px;
        border-radius: 12px;
        margin: auto;
        cursor: pointer;
      }
      .hasFieldDot {
        background-color: #007aff;
        color: #007aff;
        width: 12px;
        // font-weight: bold;
        height: 12px;
        border-radius: 12px;
        margin: auto;
        cursor: pointer;
      }
      .line {
        width: 100px;
        height: 3px;
        background-color: #8a8a8a;
      }
    }
  }

  .name {
    width: 100px;
    font-size: 12px;
    margin-top: 15px;
    margin-left: -40px;
  }
}

.item {
  flex: 1;
  border-bottom: 3px solid #007aff;
}
</style>
